<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            float: left;
            padding-left: 15px;
        }
        
        .dep {
            height: 100vh;
            width: 100vh;
            margin: 20px auto;
        }
        
        .dep1 {
            margin: 20px;
            height: 8%;
        }
        
        .dep2 {
            margin: 20px;
            height: 8%;
        }
        
        .dep3 {
            margin: 20px;
            height: 8%;
        }
    </style>
</head>

<body>
    <div class="dep">
        <h3 style="margin:10px ">请选择部门/员工</h3>
        <div class="dep1">
            <h4>
                <input type="checkbox" id="allSelect">部门1 <span><label for="group" ></label></span> </h4>
            <ul id="group">
                <li><input type="checkbox" id="1">小一</li>
                <li><input type="checkbox" id="2">小二</li>
                <li><input type="checkbox" id="3">小三</li>
            </ul>

        </div>
        <div class="dep2">
            <h4>
                <input type="checkbox" id="allSelect1">部门2
            </h4>
            <ul id="group1">
                <li><input type="checkbox" id="4">小一</li>
                <li><input type="checkbox" id="5">小二</li>
                <li><input type="checkbox" id="6">小三</li>
            </ul>

        </div>
        <div class="dep3">

            <h4>
                <input type="checkbox" id="allSelect2">部门3
            </h4>
            <ul id="group2">
                <li><input type="checkbox" id="7">小一</li>
                <li><input type="checkbox" id="8">小二</li>
                <li><input type="checkbox" id="9">小三</li>
            </ul>

        </div>



    </div>

</body>
<script>
    var allSelect = document.getElementById('allSelect');
    var group = document.getElementById('group').querySelectorAll('input');
    allSelect.onclick = function() {
        console.log(this.checked);
        for (var i = 0; i < group.length; i++) {
            group[i].checked = this.checked;

        }

    }

    for (var i = 0; i < group.length; i++) {
        group[i].onclick = function() {
            var flag = true;
            for (var i = 0; i < group.length; i++) {
                if (!group[i].checked) {
                    flag = false;
                    break;
                }

            }
            allSelect.checked = flag;
        }



    }



    var allSelect1 = document.getElementById('allSelect1');
    var group1 = document.getElementById('group1').querySelectorAll('input');
    allSelect1.onclick = function() {
        console.log(this.checked);
        for (var i = 0; i < group1.length; i++) {
            group1[i].checked = this.checked;

        }

    }

    for (var i = 0; i < group1.length; i++) {
        group1[i].onclick = function() {
            var flag = true;
            for (var i = 0; i < group1.length; i++) {
                if (!group1[i].checked) {
                    flag = false;
                    break;
                }

            }
            allSelect1.checked = flag;
        }

    }

    var allSelect2 = document.getElementById('allSelect2');
    var group2 = document.getElementById('group2').querySelectorAll('input');
    allSelect2.onclick = function() {
        console.log(this.checked);
        for (var i = 0; i < group2.length; i++) {
            group2[i].checked = this.checked;

        }

    }

    for (var i = 0; i < group2.length; i++) {
        group2[i].onclick = function() {
            var flag = true;
            for (var i = 0; i < group2.length; i++) {
                if (!group2[i].checked) {
                    flag = false;
                    break;
                }

            }
            allSelect2.checked = flag;
        }

    }
</script>

</html>